<template>
  <div>
    <Content style="text-align:left">
      <Form :label-width="100">
        <FormItem label="选择供应商">
					<Select placeholder="请选择供应商" v-model="orgId">
            <Option v-for="item in seletions" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
          </Select>
				</FormItem>
        <FormItem label="商品分类(可选)">
					<Cascader placeholder="请选择分类" clearable :data="category" v-model="categoryArray" :load-data="loadData"></Cascader>
				</FormItem>
        <FormItem label="有无图片(可选)">
          <RadioGroup v-model.number="haveImage" @on-change="selectRadio">
            <Radio :label="9">全部</Radio>
            <Radio :label="0">无图</Radio>
            <Radio :label="1">有图</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <Table v-show="false" ref="tableGrid" :columns="columns" :data="dataGridVo"></Table>
      <Button type="primary" @click="Submit">导出</Button>
    </Content>
  </div>
</template>
<script>
export default {
  name: 'ExportExcelVue',
  props: {
    callbank: Function,
    seletions: Array
  },
  data() {
    return {
      orgId: null,
      haveImage: 9,
      dataGridVo: [],
      categoryArray: [],
      category: [],
      query: {
        equal: {
          goodsType: 10
        },
        pageIndex: 1,
        pageSize: 10000
      },
      columns: [
        {
          title: "SKUID",
          key: "skuId",
          fixed: "left",
          width: 60,
          type: "selection",
        },
        {
          title: "商品名称",
          key: "skuName",
        },
        {
          title: "商品条码",
          key: "eanCode",
          width: 150,
        },
        {
          title: "计价方式",
          key: "skuModel",
          width: 150,
        },
        {
          title: "商品类别",
          key: "categoryName",
          width: 150,
        },
        {
          title: "单位",
          key: "skuUom",
          width: 80,
        },
        {
          title: "批发价",
          key: "wholesalePrice",
          width: 110,
          sortable: true,
          render: (h,params) => {
            return h('div',[
            h('a',{style:{fontSize: '12px',color: 'gray'}},'￥'),

              h('span',params.row.wholesalePrice.toFixed(2)),
            ])
          }
        },
        {
          title: "建议售价",
          width: 110,
          key: "salesPrice",
          sortable: true,
          render: (h,params) => {
            return h('div',[
            h('a',{style:{fontSize: '12px',color: 'gray'}},'￥'),
              h('span',params.row.salesPrice.toFixed(2)),
            ])
          }
        },
        {
          title: "系统进价",
          key: "systemPrice",
          width: 110,
          sortable: true,
          render: (h,params) => {
            return h('div',[
            h('a',{style:{fontSize: '12px',color: 'gray'}},'￥'),
              h('span',params.row.systemPrice.toFixed(2)),
            ])
          }
        },
        {
          title: "进项税",
          key: "inputRate",
          width: 80,
        },
        {
          title: "销项税",
          key: "outputRate",
          width: 80,
        },
        {
          title: "质保天数",
          key: "expireDate",
          width: 80,
        },
        {
          title: "产地",
          key: "productionPlace",
          width: 80,
        }
      ]
    }
  },
  watch: {
    categoryArray(val) {
			this.query.equal.categoryId = val[val.length - 1]
		}
  },
  methods: {
    //初始化
    Init(orgId) {
      this.orgId = orgId
      this.getCategoryList()
    },
    Submit() {
      this.query.equal.orgId = this.orgId
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/view/basic/sku/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGridVo = res.data.data.list
            this.$nextTick(() => {
              this.Export()
            })
          } else {
            this.$Notice.warning({
              title: "商品获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get()
    },
    selectRadio(code) {
      if(code === 0) {
        delete this.query.queryNeqs
        this.query.equal.skuImage = 'https://view-assets.oss-cn-chengdu.aliyuncs.com/miniapp/sku_default.png'
      } else if(code === 1) {
        delete this.query.equal.skuImage
        this.query.queryNeqs = [{
          field: 'sku_image',
          value: 'https://view-assets.oss-cn-chengdu.aliyuncs.com/miniapp/sku_default.png'
        }]
      } else {
        delete this.query.equal.skuImage
        delete this.query.queryNeqs
      }
    },
    getCategoryList(){
			new this.$rest({
				service: 'agroerp-shop',
				 gateway: 'agroerp',
				url: '/v1.0/plus/category/lazy',
				query: {
					equal:{
            categoryType: 0
          }  
				},
				action: (res)=>{
					if(res.data.code === 20000){
						this.category = res.data.data
					} else {
						this.$Notice.warning({
							title: '商品分类获取失败',
							desc: `失败原因：${res.data.msg}`
						})
					}
				}
			}).get()
		},
		loadData (item, callback) {
      item.loading = true;
      new this.$rest({
				service: 'agroerp-shop',
				 gateway: 'agroerp',
				url: '/v1.0/plus/category/lazy',
				query: {
					equal: {
            categoryPid: item.value,
            categoryType: 0
          },
				},
				action: (res)=>{
					if(res.data.code === 20000){
						item.children = res.data.data
						item.loading = false
            callback()
					} else {
						this.$Message.error(res.data.msg)
					}
				}
			}).get()
    },
    Export() {
      this.$refs.tableGrid.exportCsv({
        filename: `${this.$store.getWms('warehouseName')}_${new Date().getTime()}`,
        original: false
      })
    }
  },
  created() {
    
  },
};
</script>

<style lang="less" scoped>
.cust-form {
  text-align: left !important;
}
</style>
